<template>
  <div class="headFilter">
    <div class="headFilter-right">
      <el-popover placement="bottom" trigger="click" :width="420">
        <template #reference>
          <span title="表格列展示筛选">
            <i-ep-setting class="mr-2 cursor-pointer" />
          </span>
        </template>
        <div class="w-[400px]">
          <div class="w-full pb-3 flex item-content justify-between border-b-[var(--el-border-color-light)] border-b-1">
            <div>
              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
                列展示
              </el-checkbox>
              <el-checkbox v-model="serialColumn" @change="handleSerialColumnChange"> 序号列 </el-checkbox>
              <el-checkbox v-model="tickColumn" @change="handleTickChange"> 勾选列 </el-checkbox>
              <el-checkbox v-model="verticalBorder" @change="handleVerticalBorderChange"> 纵向边框 </el-checkbox>
              <el-checkbox v-model="sortables" @change="handleSortableCustomChange"> 列排序 </el-checkbox>
            </div>
            <el-button @click="reset" type="primary" link> 重置 </el-button>
          </div>
          <div class="w-[400px] pt-3">
            <el-checkbox-group
              class="w-[390px] flex flex-wrap justify-between"
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <div class="w-[190px]" v-for="(item, index) in propList" :key="item?.prop + `${index}`">
                <el-checkbox v-if="item?.slotName !== 'handler'" :label="item" :value="item">
                  {{ item.label }}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </el-popover>
      <div class="mx-2 mt-1" title="表格尺寸">
        <el-dropdown trigger="click" @command="handleSizeChange">
          <svg-icon class="cursor-pointer" icon-class="size" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item of sizeTableOptions"
                :key="item.value"
                :disabled="tableSize == item.value"
                :command="item.value"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div title="加载列表数据">
        <i-ep-refresh @click="refresh" class="ml-2 cursor-pointer" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { cloneDeep } from "lodash-es";
import { ColumnOption, SizeTable, sizeTableOptions } from "@/components/SuperTable/tableType";
import type { CheckboxValueType } from "element-plus";
interface Props {
  propList: ColumnOption[]; //表格行el-table-column配置项
}
const { propList } = defineProps<Props>();

const emits = defineEmits<{
  setPropList: [_row: any];
  refreshHandle: any;
  handleSerialColumn: [val: any];
  handleTick: [val: any];
  handleSizeTable: [val: any];
  handleVerticalBorder: [val: any];
  handleZebraTable: [val: any];
  handleSortableCustom: [val: any];
}>();

onMounted(() => {
  resetFn();
});
watch(
  () => propList,
  () => {
    resetFn();
  }
);
const checkAll = ref<boolean>(false);
const isIndeterminate = ref<boolean>(true);
const checkedCities = ref<any[]>([]);
// 全部列展示
const handleCheckAllChange = (val: CheckboxValueType) => {
  // 默认要展示操作按钮
  const handlerObj = propList.filter((item: ColumnOption) => item.slotName == "handler");
  checkedCities.value = val ? propList : handlerObj;
  isIndeterminate.value = false;
  emits("setPropList", checkedCities.value);
};
// 选择单个列展示
const handleCheckedCitiesChange = (value: any[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === propList.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < propList.length;
  const propListProp: ColumnOption[] = cloneDeep(propList);
  const valueArrProp: Array<string | undefined> = value.map((item: ColumnOption) => item.prop);
  // 设置表格列的显示与隐藏
  propListProp.forEach((column: ColumnOption) => {
    const prop: string | undefined = column?.prop;
    // 如果选中，则设置列显示
    if (valueArrProp.includes(prop)) {
      column.showTable = false;
    } else {
      // 如果未选中，则设置列隐藏
      column.showTable = true;
    }
  });
  emits("setPropList", propListProp);
};

// 序号列
const serialColumn = ref<boolean>(true);
const handleSerialColumnChange = (val: CheckboxValueType): void => {
  emits("handleSerialColumn", val);
};

// 勾选列
const tickColumn = ref<boolean>(true);
const handleTickChange = (val: CheckboxValueType) => {
  emits("handleTick", val);
};

// Table的尺寸
const tableSize = ref<SizeTable>("default");
const handleSizeChange = (size: SizeTable) => {
  tableSize.value = size;
  emits("handleSizeTable", size);
};

// 纵向边框
const verticalBorder = ref<CheckboxValueType>(false);
const handleVerticalBorderChange = (val: CheckboxValueType) => {
  verticalBorder.value = val;
  emits("handleVerticalBorder", val);
};

// 对应列是否可以排序
const sortables = ref<CheckboxValueType>(false);
const handleSortableCustomChange = (val: CheckboxValueType) => {
  sortables.value = val;
  emits("handleSortableCustom", val);
};

// 重置
const resetFn = () => {
  checkedCities.value = propList;
  checkAll.value = true;
  isIndeterminate.value = false;
  verticalBorder.value = false;
  sortables.value = false;
  emits("handleVerticalBorder", false);
  emits("handleSortableCustom", false);
};
const reset = () => {
  resetFn();
  emits("setPropList", propList);
};
// 加载列表
const refresh = () => {
  emits("refreshHandle");
};
</script>
<style scoped lang="scss">
.headFilter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  .headFilter-right {
    display: flex;
    align-items: center;
    width: 90%;
    ::deep(.el-checkbox) {
      margin-right: 4px;
    }
  }
}
</style>
